// 龙虎榜
<script lang="ts">
export default {
  name: "winnersList",
};
</script>
<template>
  <div class="page-box h100 display-flex czbj">
    <div class="">
      <n-form ref="formRef" inline size="normal">
        <n-form-item>
          <n-input
            v-model:value="obj.scode"
            placeholder="请输入股票代码"
            size="medium"
          />
        </n-form-item>
        <n-form-item>
          <n-button type="error" size="medium" @click="initData">查询</n-button>
        </n-form-item>
      </n-form>
    </div>
    <n-data-table
      size="small"
      class="mt10"
      :max-height="650"
      :row-class-name="rowClassName"
      :pagination="paginationReactive"
      :columns="columns"
      :data="tableData"
      :single-line="false"
      remote
      @update:page="handlePageChange"
    />
  </div>
</template>
<script lang='ts' setup>
import { ref, h, reactive, onActivated } from "vue";
import { useRouter } from "vue-router";
import { dxget, hf, CommaTransferAmount } from "../../util/index";
import comp from "../../components/index";
const { currentRoute } = useRouter();

let tableData = ref([]);
let obj = reactive({
  scode: null,
  page: 1,
  rows: 15,
});
const paginationReactive = reactive({
  page: 1,
  pageCount: 1,
  pageSize: 15,
});
let columns = [
  {
    type: "expand",
    expandable: (rowData) => rowData.name !== "Jim Green",
    renderExpand: (rowData) => {
      return h(comp.secondaryForm, {
        data: rowData,
      });
    },
  },
  {
    title: "股票号码",
    key: "secCode",
    align: "center",
    width: 86,
  },
  {
    title: "证券简称",
    key: "secName",
    align: "center",
    width: 120,
  },
  {
    title: "信息公开原因",
    key: "type",
  },
  {
    title: "买卖占比",
    key: "secCode",
    align: "center",
    width: 120,
    render(row) {
      return h(comp.BuyingAndSellingOf, {
        data: row,
      });
    },
  },
  {
    title: "当前价格",
    key: "f2",
    width: 90,
    align: "center",
  },
  {
    title: "涨幅%",
    key: "f3",
    width: 90,
    align: "center",
    render(row) {
      return row.f3 + "%";
    },
  },
  {
    title: "涨幅金额",
    key: "f4",
    width: 90,
    align: "center",
  },
  {
    title: "前五买入合计",
    key: "buyTotal",
    align: "center",
    width: 120,
    render(row) {
      return CommaTransferAmount(row.buyTotal) + "亿";
    },
  },
  {
    title: "前五卖出合计",
    key: "sellTotal",
    align: "center",
    width: 120,
    render(row) {
      return CommaTransferAmount(row.sellTotal) + "亿";
    },
  },
  {
    title: "交易日",
    key: "tradeTime",
    align: "center",
    width: 120,
  },
  {
    title: "操作",
    width: 80,
    align: "center",
    render(row) {
      return h(comp.MoreOperations, {});
    },
  },
];

const initData = async () => {
  const { data }: any = await dxget("gupiao/getMarketStatisticsData", obj);
  data.marketList.map((a, b) => {
    a.key = b;
  });
  tableData.value = data.marketList;
  paginationReactive.pageCount = data.totalPage;
};

const rowClassName = (row, index) => {
  if (row.f3 >= 0) {
    return "red";
  }
  return "ls";
};
const handlePageChange = (page) => {
  paginationReactive.page = page;
  obj.page = page;
  initData();
};
const rowProps = (row, aa) => {
  return {
    style: "cursor: pointer;",
    onClick: (idx) => {
      hf("stockDetails", {
        code: row.f12,
      });
    },
  };
};
onActivated(() => {
  const qurl = currentRoute.value.query;
  let codetw = qurl.code;
  obj.scode = codetw;
  obj.page = 1;
  initData();
});
</script>
<style scoped>
</style>
